<!doctype html>
<html><head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="favicon.ico" />
	<script>
		function imgOver(){
			document.getElementById("enter").src="./asset/img/enter_over.png";
		}
		function imgOut(){
			document.getElementById("enter").src="./asset/img/enter_out.png";
		}
	</script>
	<title>太正浪漫資料館</title>
	<style>
		#canvas{
			position: fixed;
			width: 100%;
			height: 100%;
			z-index: -1;
		}
		.welcomeImage,.welcomeLogo{
			justify-content: center;
			text-align: center;
		}
		@media only screen and (min-width: 1366px){
			.welcomeImage{
				width: 35%;
				min-width: 650px;
				position: absolute;
				top: 150px;
				left: 2vw;
			}
			.welcomeLogo{
				width:60vw;
				position: absolute;
				padding-left: 42vw;
				top:45%;
				text-align: center;
			}
			.fullLogo{
				text-align: center;
			}
			.logoMonji{
				float: left;
				width: 12.5%; 
				height: 100%;
				align-items: center;
			}
			.logoFont{
				font-family: FOT -Carat Std UB;
				font-size: calc(70vw/10);
				position: relative;
				top:-50px
			}
			.enter{
				width:30%
			}
		}
		@media only screen and (max-width: 1365px) and (min-width: 769px){
			.welcomeImage{
				width:650px;
				position: fixed;
				top: 10%;
				left: 20px
			}
			.welcomeLogo{
				position: fixed;
				left:75%;
				right:15px;
				top:90px;
				text-align: center;
			}
			.fullLogo{
				text-align: center;
			}
			.logoMonji{
				width: 110px; 
			}
			.logoFont{
				font-family: FOT -Carat Std UB;
				font-size: calc(90vh/9);
				height: calc(90vh/9);
				position: inherit;
				display: flex;
				top:-50px;
			}
			.enter{
				width:30%
			}
		}
		@media only screen and (max-width: 768px){
			.welcomeImage{
				width:100%;
				position: absolute;
				top: 130px;
			}
			.welcomeLogo{
				width:100%;
				position: absolute;
				top: 35px;
				left:1.2%
			}
			.fullLogo{
				text-align: center;
			}
			.logoMonji{
				float: left;
				width: 13.8%; 
				align-items: center;
			}
			.logoFont{
				height: 10%;
				font-family: FOT -Carat Std UB;
				font-size: calc(100vw/7);
				position: relative;
			}
			.enter{
				width:40%
			}
		}
	</style>
</head>
<body style='overflow:-Scroll;overflow-x:hidden'>
<script src="top.js"></script>
	<canvas id="canvas" width="100%" height="100%"></canvas>
		<div class="welcomeImage">
			<img src="asset/img/sakura_home.png" width="100%">
		</div>
		<div class="welcomeLogo">
			<ul class="fullLogo">
				<li class="logoMonji"><span class="logoFont">太</span></li>
				<li class="logoMonji"><span class="logoFont">正</span></li>
				<li class="logoMonji"><span class="logoFont">浪</span></li>
				<li class="logoMonji"><span class="logoFont">漫</span></li>
				<li class="logoMonji"><span class="logoFont">資</span></li>
				<li class="logoMonji"><span class="logoFont">料</span></li>
				<li class="logoMonji"><span class="logoFont">館</span></li>
			</ul><!--<br><br><br>
			<a href="home.html">
				<img class="enter" id="enter" onmouseover="imgOver()" onmouseout="imgOut()" src="asset/img/enter_out.png">
			</a>//-->
		</div>
	<script src="./js/jquery-1.11.1.min.js"></script>
	<script async="" src="./js/fallen.js"></script>
</body>
</html>
